const {createApp} = Vue;
const app = createApp({
	data() {
		return{
			goods,
			//配送费
			delearyPrice:5,
			//起送门槛
			deliveryThreshold:30,
			addIconInfo:{
				show:false,
				point:{
					x:0,y:0
				}
			}
		}
	},
	methods(){
		increse(val,el){
			const startRect = el.target.getBoundingClientRect();
			this.addIconInfo.point.x = startRect.x;
			val.chooseNum++;
			val.allPrice = val.chooseNum * val.price
		},
		decrese(val){
			if(val.chooseNum <= 0){
				return
			}
			val.chooseNum--;
			val.allPrice = val.chooseNum * val.price;
		},
		addIconTransitionend(){
			this.addIconInfo.show = false;
			this.$refs.footerCar.classList.add('animate');
		},
		carAnimationend(){
			this.$refs.footerCar.classList.remove('animate');
		},
		toJump(el){
			this.addIconInfo.show = false;
			//设置初始位置
			const startRect = el.target.getBoundingClientRect();
			this.addIconInfo.point.x = startRect.x + startRect.width/2;
			this.addIconInfo.point.y = startRect.y + startRect.height/2;
			setTimeout(()=>{
				const endRect = this.$refs.footerCar.getBoundingClientRect();
				this.addIconInfo.point.x = startRect.x + startRect.width/2;
				this.addIconInfo.point.y = startRect.y + startRect.height/2;
			},0)
		}
	},
	mounted(){
		this.goods = this.goods.map(val =>{
			return{
				...val,
				chooseNum:0,
				allPrice:0
			}
		})
	},
	computed:{
		payInfo(){
			let sumPrice = 0
			let goodsNum = 0
			this.goods.forEach(val =>{
				sumPrice += val.allPrice
				goodsNum += val.chooseNum
			})
			return{
				payPrice:sumPrice,
				goodsNum
			}
		}
	}
})
const vm = app.mount("#app")